<template>
    <div class="out-style">
    <Modal class="global-modal-line" v-model="isShow" title="编辑文章" :closable="false" :mask-closable="false">
        <template>
            <Spin size="large" fix v-if="spinShow"></Spin>
            <Form ref="formItem" :rules="ruleValidate" :model="formItem" :label-width="80">
                <FormItem label="文章名称" prop="article_name">
                    <Input v-model="formItem.article_name" placeholder="请输入文章名称"></Input>
                </FormItem>
                <FormItem label="文章作者" prop="article_author">
                    <Input v-model="formItem.article_author" placeholder="请输入文章作者"></Input>
                </FormItem>
                <FormItem label="分类名称" prop="category_id">
                    <Select v-model="formItem.category_id">
                        <Option v-for="(item,index) in titleList" :value="item.id" :key="index">{{ item.title }}</Option>
                    </Select>
                </FormItem>
            </Form>
        </template>
        <div slot="footer">
            <Button type="text" @click="cancelAction()">取消</Button>
            <Button type="success" :loading="btnLoading" @click="handleSubmit()">保存</Button>
        </div>
    </Modal>
    </div>
</template>

<script>
import { getArticleDetails, getCategoryList } from '@/api/manager'
export default {
  name: 'EditArticle',
  props: {
    isShow: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    Id: {
      type: String,
      default: () => {
        return {}
      }
    }
  },
  data () {
    const isEmpty = (rule, value, callback) => {
      if (!this.formItem.category_id) {
        return callback(new Error('必须填写'))
      } else {
        return callback()
      }
    }
    return {
      ruleValidate: {
        article_name: [
          { required: true, message: '文章名称不能为空', trigger: 'blur' }
        ],
        article_author: [
          { required: true, message: '文章作者不能为空', trigger: 'blur' }
        ],
        category_id: [
          { required: true, validator: isEmpty, trigger: 'change' }
        ]
      },
      spinShow: false,
      titleList: [],
      btnLoading: false,
      formItem: {
        id: '',
        article_name: '',
        article_author: '',
        category_id: ''
      }
    }
  },
  methods: {
    init () {
      getCategoryList().then(ret => {
        this.titleList = ret.data.data.list
      })
    },
    handleSubmit (formItem) {
      this.$refs['formItem'].validate((valid) => {
        if (valid) {
          this.$emit('results', this.formItem)
        } else {
          this.$Message.error({
            content: '操作失败,请核对添加信息后重试'
          })
        }
      })
    },
    cancelAction () {
      this.$emit('cancel')
    },
    useIdByInfo () {
      let param = this.Id
      this.spinShow = true
      getArticleDetails(param).then(ret => {
        this.spinShow = false
        this.formItem.id = ret.data.data.list[0].id
        this.formItem.article_name = ret.data.data.list[0].article_name
        this.formItem.article_author = ret.data.data.list[0].article_author
        this.formItem.category_id = ret.data.data.list[0].category_id
      })
    }
  },
  mounted () {
    this.init()
    this.useIdByInfo()
  },
  watch: {
  }
}
</script>

<style scoped>
    .out-style>>> .ivu-modal-header {
        border-bottom: none;
        padding: 14px 16px;
        line-height: 1;
    }

    .out-style>>> .ivu-modal-footer {
        border-top: none;
    }
</style>
